<style lang="less">
@import '../../../styles/table-common.less';
@import './doneManage.less';
@import '../../personInfo.less';
</style>
<style lang="less" scoped>
.mr16 {
  margin-right: 16px
}
.w200 {
  width: 200px
}
.icon {
  background: rgb(45, 154, 244); border-radius: 50%; padding: 3px
}
.ml-35 {
  margin-left: -35px
}
@media (max-width: 1920px) {
    /deep/ .ivu-table .ivu-table-fixed-right {
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-body {
        height: 94% !important;
    }
    /deep/ .ivu-table-body {
        height: 94%!important;
    }
}
</style>
<template>
  <div class="search">
    <historicDetail v-if="showHistory" @close="showHistory = false" :idCard="idCard"/>
    <Row :gutter="16" class="all-height" v-else>
      <Col :span="showRight ? 18 : 24" class="all-height">
        <Card class="all-height card-child-height">
          <Row class="operation code-row-bg" style="display: flex; justify-content: space-between">
            <Col span="22">
              <Button v-has="'delete'" @click="delAll" icon="md-trash">批量删除</Button>
              <Button @click="getDataList" icon="md-refresh">刷新</Button>
              <Button @click="exportDoneList" icon="md-refresh">导出当前筛选数据</Button>
              <!--        <Button type="dashed" @click="openSearch = !openSearch">{{-->
              <!--          openSearch ? "关闭搜索" : "开启搜索"-->
              <!--        }}</Button>-->
              <Button type="dashed" @click="openTip = !openTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
            </Col>
            <Col span="2" style="text-align: right">
              <Icon
                  color="#fff"
                  class="icon"
                  :type="showRight ? `ios-arrow-forward` : `ios-arrow-back`"
                  @click.native="clickShowRight"
              ></Icon>
              <!--              <Button-->
              <!--                  :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"-->
              <!--                  @click.native="clickShowRight"-->
              <!--                  size="mini"-->
              <!--                  type="primary">-->
              <!--              </Button>-->
            </Col>
          </Row>
          <Row v-show="openTip">
            <Alert show-icon>
              已选择
              <span class="select-count">{{ selectList.length }}</span>
              项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </Row>
          <Row class="calc-px-height">


            <div v-if="loading" class="wh-100 d-flex-around-center">
              <Spin></Spin>
            </div>
            <div v-else v-ref-height="refHeight" class="wh-100">
              <Table
                  v-if="data.length > 0"
                  :height="refHeight.value"
                  border
                  :columns="columns"
                  sortable="custom"
                  :data="data"
                  @on-sort-change="changeSort"
                  @on-selection-change="showSelect"
                  ref="table"
              ></Table>
              <div v-else class="wh-100">
                <NoData class="wh-100"></NoData>
              </div>
            </div>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10, 20, 50, 100, 200]"
                size="small"
                show-total
                show-elevator
                show-sizer
            ></Page>
          </Row>
        </Card>
      </Col>
      <Col span="6" class="all-height" v-if="showRight">
        <Card class="all-height card-child-height">
          <Row v-show="!modalVisible" @keydown.enter.native="handleSearch">
            <Col span="24">
              <div class="drawer-header">
                <div class="mr16">查询区</div>
              </div>
            </Col>
            <Col span="24">
              <Form ref="searchForm" :model="searchForm"  :label-width="quryLabelWidth" class="marginForm">
                <FormItem label="学号" prop="xh">
                    <Input type="text" v-model="searchForm.xh" placeholder="请输入" clearable />
                </FormItem>
                <FormItem label="学生姓名" prop="applyer">
                    <Input type="text" v-model="searchForm.applyer" placeholder="请输入" clearable />
                </FormItem>
                <FormItem label="学校名称" prop="xxmc">
                    <Input type="text" v-model="searchForm.xxmc" placeholder="请输入" clearable />
                </FormItem>

                <FormItem label="院系名称" prop="yxmc">
                    <Input type="text" v-model="searchForm.yxmc" placeholder="请输入" clearable />
                </FormItem>
                <FormItem label="就业状况" prop="jyzk">
                    <Select v-model="searchForm.jyzk" clearable transfer >
                        <Option v-for="(item,index) in oneTypeDicts" :value="item.value" :key="index">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="单位类别" prop="gzzwlb">
                    <Select v-model="searchForm.gzzwlb" clearable filterable >
                        <Option v-for="(item,index) in gzzwlbList" :value="item.value" :key="index">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="单位名称" prop="dwmc">
                  <Input type="text" v-model="searchForm.dwmc" placeholder="请输入单位名称" clearable />
                </FormItem>
                <FormItem label="单位行业" prop="dwhy">
                    <Select v-model="searchForm.dwhy" clearable filterable >
                        <Option v-for="(item,index) in dwhyList" :value="item.value" :key="index">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="审核状态" prop="status">
                    <Select v-model="searchForm.status" clearable transfer >
                    <Option value="complete">已通过</Option>
                    <Option value="back">驳回</Option>
                  </Select>
                </FormItem>
                  <FormItem class="br box-key">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
          <Row class="calc-sm-height" v-show="modalVisible">
            <div class="drawer-header">
              <div class="mr16" >{{ modalTitle }}</div>
            </div>
            <Form ref="form" :model="form" :label-width="70" :rules="formValidate" class="marginForm">
              <FormItem label="删除原因" prop="reason">
                <Input type="textarea" v-model="form.reason" :rows="4"/>
              </FormItem>
            </Form>
            <div slot="footer">
              <Button type="text" @click="handelCancel">取消</Button>
              <Button type="text" @click="bysqxCancel">撤回</Button>
              <Button type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button>
            </div>
          </Row>
        </Card>
      </Col>
    </Row>

    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500"></Modal>
  </div>
</template>

<script>
import {doneList, updateInsStatus, deleteHistoricTask, exportDoneList,getCollegeCancal} from '@/api/activiti';
import {getDictDataByType} from '@/api/index';
import util from '@/libs/util';
import historicDetail from '../historic-detail/historicDetail.vue';
import {shortcuts} from '@/libs/shortcuts';
import NoData from '@/components/NoData.vue';
import Cookies from 'js-cookie';

export default {
  name: 'doneManage',
  components: {
    historicDetail,
    NoData,
  },
  data() {
    return {
      quryLabelWidth: 70,
      gzzwlbList: [],
      dwhyList: [],
      exportingAll: false,
      showHistory: false,
      idCard: '',
      openSearch: true,
      openTip: true,
      loading: true, // 表单加载状态
      selectList: [], // 多选数据
      refHeight: {value: 0},
      height1: 0,
      searchForm: {
        // 搜索框对应data对象
        name: '',
        pageNumber: 1, // 当前页数
        pageSize: 50, // 页面大小
        sort: 'createTime', // 默认排序字段
        order: 'desc' // 默认排序方式
      },
      selectDate: null,
      options: {
        shortcuts: shortcuts
      },
      modalType: 0, // 添加或编辑标识
      modalVisible: false, // 添加或编辑显示
      modalTitle: '', // 添加或编辑标题
      form: {
        // 添加或编辑表单对象初始化数据
        reason: ''
      },
      formValidate: {
        // 表单验证规则
      },
      submitLoading: false, // 添加或编辑提交状态
      columns: [],
      columns_1: [
        // 表头
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          title: '序号',
          width: 60,
          align: 'center'
        },
        {
          title: '学号',
          key: 'xh',
          minWidth: 140
        },
        {
          title: '学生姓名',
          key: 'applyer',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '学校名称',
          key: 'xxmc',
          minWidth: 180
        },
        {
          title: '院系名称',
          key: 'yxmc',
          minWidth: 120
        },
        {
          title: '就业状况',
          key: 'jyzk',
          minWidth: 80,
          render: (h, params) => {
            let dict = this.oneTypeDicts.find(item => item.value == params.row.jyzk).title;
            return h('div', dict ? dict : '');
          }
        },
        {
          title: '单位名称',
          key: 'dwmc',
          minWidth: 250,
          sortable: false
        },
        {
          title: '单位行业',
          key: 'dwhy',
          minWidth: 280,
          sortable: false,
          render: (h, params) => {
            let arr = this.dwhyList.filter(e => e.value == params.row.dwhy);
            return h('span', arr && arr.length > 0 ? arr[0].title : '');
          }
        },
        {
          title: '工作职位类别',
          key: 'gzzwlb',
          minWidth: 180,
          sortable: false,
          render: (h, params) => {
            let arr = this.gzzwlbList.filter(e => e.value == params.row.gzzwlb);
            return h('span', arr && arr.length > 0 ? arr[0].title : '');
          }
        },
        {
          title: '审核节点',
          key: 'name',
          minWidth: 120
        },
        {
          title: '审核结果',
          key: 'deleteReason',
          align: 'center',
          minWidth: 100,
          fixed: 'right',
          render: (h, params) => {
            let text = '';
            let color = 'default';
            if (params.row.deleteReason == 'completed') {
              text = '通过';
              color = 'green';
            } else if (params.row.deleteReason == 'backed') {
              text = '驳回';
              color = 'orange';
            }
            else if (params.row.deleteReason == 'collegeCancel') {
              text = '学院撤回';
              color = 'orange';
            } else if (params.row.deleteReason == 'canceled-') {
              text = '学生撤回';
              color = 'magenta';
            } else if (params.row.deleteReason == 'no-passed') {
              text = '不通过';
              color = 'red';
            }
            return h('div', [
              h(
                  'Tag',
                  {
                    props: {
                      color: color
                    }
                  },
                  text
              )
            ]);
          }
        },
        {
          title: '审核意见',
          key: 'comment',
          align: 'center',
          minWidth: 130
        },
        {
          title: '耗时',
          key: 'duration',
          align: 'center',
          width: 100,
          sortable: true,
          render: (h, params) => {
            return h('div', util.millsToTime(params.row.duration));
          }
        },
        {
          title: '审核时间',
          key: 'endTime',
          width: 180,
          sortType: 'desc',
          sortable: true
        },
        {
          title: '申请时间',
          key: 'startTime',
          minWidth: 160
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 180,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                  'a',
                  {
                    on: {
                      click: () => {
                        this.detail(params.row);
                      }
                    }
                  },
                  '详情'
              ),
              h('Divider', {
                style: {
                  display:this.resource==3 ? 'inline-block' : 'none'
                },
                props: {
                  type: 'vertical'
                }
              }),
              h(
                  'a',
                  {
                    style: {
                      display:this.resource==3 ? 'inline-block' : 'none'
                    },
                    on: {
                      click: () => {
                        this.procInst(params.row);
                      }
                    }
                  },
                  '撤回'
              ),
              h('Divider', {
                props: {
                  type: 'vertical'
                }
              }),
              h(
                  'a',
                  {
                    on: {
                      click: () => {
                        this.history(params.row);
                      }
                    }
                  },
                  '审核历史'
              ),
              h('Divider', {
                props: {
                  type: 'vertical'
                }
              }),
              h(
                  'a',
                  {
                    style: {
                      display: this.hasPermission(this, 'delete') ? 'inline-block' : 'none'
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  '删除'
              )
            ]);
          }
        }
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      deleteId: '',
      dictPriority: [],
      showRight: true,
      resource:''
    };
  },
  methods: {
    tableheig() {
      var bbb = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
      var aaa = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[1];
      var ccc = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[0].scrollHeight;
      var ddd = bbb - ccc;
      console.log(bbb, '00000000000000');
      aaa.style.height = `${ddd}px`;

      if (this.searchForm.pageSize === 10) {
        this.height1 = 0;
      } else {
        this.height1 = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
        if (this.total < this.searchForm.pageNumber * this.searchForm.pageSize) {
          var r = (this.searchForm.pageNumber - 1) * this.searchForm.pageSize;
          var a = this.total - r;
          var s = a * 43 + 65;
          if (s < this.height1) {
            this.height1 = 0;
          }
        }
      }
      if (this.total < 10) {
        this.height1 = 0;
      }
    },
    init() {
      this.getDictDataType();
      this.getDataList();
    },
    // 显示隐藏右侧区域
    clickShowRight() {
      this.showRight = !this.showRight;
    },
    getDictDataType() {
      getDictDataByType('priority').then(res => {
        if (res.success) {
          this.dictPriority = res.result;
        }
      });
      // 工作职位类别
      getDictDataByType('job-position-category').then(res => {
        if (res.success) {
          this.gzzwlbList = res.result;
        }
      });
      // 单位行业
      getDictDataByType('unit-industry').then(res => {
        if (res.success) {
          this.dwhyList = res.result;
        }
      });
      getDictDataByType('qx').then(res => {
        if (res.success) {
          this.oneTypeDicts = res.result;
        }
      });
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == 'normal') {
        this.searchForm.order = '';
      }
      this.getDataList();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    getDataList() {
      this.loading = true;
      doneList(this.searchForm).then(res => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.list;
          console.log(res.result.total)
          this.total = res.result.total;
        }
      });
    },
    // 导出已办
    exportDoneList() {
      this.exportingAll = true;
      exportDoneList(this.searchForm).then(res => {
        this.exportingAll = false;
        // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
        const blob = new Blob([res], {type: 'charset=utf-8'});
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '已审核的去向信息.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 删除节点
        window.URL.revokeObjectURL(url); //释放该 url
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 50;
      this.getDataList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 50;
      this.selectDate = null;
      this.searchForm.startDate = '';
      this.searchForm.endDate = '';
      // 重新加载数据
      this.getDataList();
    },
    showSelect(e) {
      this.selectList = e;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    handelCancel() {
      this.modalVisible = false;
    },
    bysqxCancel(){

    },
    handelSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          if (this.modalType == 0) {
            deleteProcessIns({ids: this.deleteId}).then(res => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success('操作成功');
                this.modalVisible = false;
                this.getDataList();
              }
            });
          } else if (this.modalType == 1) {
            let ids = '';
            this.selectList.forEach(function (e) {
              ids += e.id + ',';
            });
            ids = ids.substring(0, ids.length - 1);
            // 批量删除
            deleteProcessIns({ids: ids}).then(res => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success('操作成功');
                this.modalVisible = false;
                this.clearSelectAll();
                this.getDataList();
              }
            });
          }
        }
      });
    },
    editStatus(status, v) {
      let operation = '';
      if (status == 0) {
        operation = '暂停挂起';
      } else {
        operation = '激活运行';
      }
      this.$Modal.confirm({
        title: '确认' + operation,
        content: `您确认要${operation}流程实例${v.name}?`,
        loading: true,
        onOk: () => {
          let params = {
            status: status,
            id: v.id
          };
          updateInsStatus(params).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success('操作成功');
              this.getDataList();
            }
          });
        }
      });
    },
    detail(v) {
      let query = {
        id: v.tableId,
        type: '4',
        backRoute: this.$route.name,
        applyId: v.applyerUserid
      };
      // this.$router.push({
      //     name: v.routeName,
      //     query: query
      // });
      this.$router.push({
        name: 'jyqx',
        query: query
      });
    },
    procInst(v){
      console.log(v);
      let data ={
        procInstId:v.procInstId
      }
      getCollegeCancal(data).then(res => {
        if (res.code==200){
          this.$message.success('撤回成功')
        }
        this.handleSearch()
      })
    },
    history(v) {
      console.log(v)
      if (!v.applyerUserid) {
        // this.$Message.error("流程实例ID不存在");
        this.$Message.error({
          content: '流程实例ID不存在',
          duration: 5,
          closable: true
        });
        return;
      }
      this.idCard = v.idCard;
      this.showHistory = true;
    },
    remove(v) {
      this.$Modal.confirm({
        title: '确认删除',
        // 记得确认修改此处
        content: '您确认要删除 ' + v.name + ' ?',
        loading: true,
        onOk: () => {
          deleteHistoricTask({ids: v.id}).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.clearSelectAll();
              this.$Message.success('操作成功');
              this.getDataList();
            }
          });
        }
      });
    },
    delAll() {
      if (this.selectList.length <= 0) {
        this.$Message.warning('您还未选择要删除的数据');
        return;
      }
      this.modalTitle = '确认要删除所选的 ' + this.selectList.length + ' 条数据';
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
        loading: true,
        onOk: () => {
          let ids = '';
          this.selectList.forEach(function (e) {
            ids += e.id + ',';
          });
          ids = ids.substring(0, ids.length - 1);
          // 批量删除
          deleteHistoricTask({ids: ids}).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success('操作成功');
              this.clearSelectAll();
              this.getDataList();
            }
          });
        }
      });
    },
    onRestWindow() {
        this.columns = this.restTableCellWidth(this.columns_1)
        this.quryLabelWidth = this.searchLabelWidth(100)
        // this.addOrEditLabelWidth = this.searchLabelWidth(100)
    }
  },
  mounted() {
    let resource = JSON.parse(Cookies.get('userInfo')).resource;
    this.resource = resource
    //
    console.log(resource ,44);
    this.onRestWindow()
    window.addEventListener('resize',this.onRestWindow)
    this.init();
  },
  beforeDestroy() {
    window.removeEventListener('resize',this.onRestWindow)
  },
  // watch: {
  //   // 监听路由变化
  //   $route(to, from) {
  //     if (to.name == 'done-manage') {
  //       this.getDataList();
  //     }
  //   }
  // }
};
</script>
<style lang="less" scoped>
// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 150px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: 0.12rem !important;
    .ivu-form-item-content {
        display: flex;
    }
}
/deep/ .ivu-input-type-textarea,/deep/ .ivu-input {
    height: calc(100% - 7px) !important;
}
.flex-1 {
    height: 100%;
}
/deep/ .ivu-drawer-body {
    overflow: hidden;
    .d-flex-align-center {
        height: fit-content !important;
        margin-left: 0 !important;
        justify-content: right;
        box-sizing: border-box;
        padding-right: 7px;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 100px !important;
    }
}
</style>
